<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>013组件使用中的细节点-counter计数器</title>
  <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <counter @change="handleChange" ref="one"></counter>
        <counter @change="handleChange" ref="two"></counter>
        <span>下面这个组件：计算前2个组件的和</span>
        <div>{{total}}</div>
    </div>
    <script>
      var vm = new Vue({
        el: "#root",
        data: {
          total: 0
        },
        components: {
          "counter": {
            template: "<div @click='handleClick'>{{number}}</div>",
            data: function() {
              return {
                number: 0
              }
            },
            methods: {
              handleClick: function() {
                this.number++;
                this.$emit("change");
              }
            },
          }
        },
        methods: {
          handleChange: function() {
            // console.log(this.$refs.one.number);
            // console.log(this.$refs.two.number);
            this.total = this.$refs.one.number + this.$refs.two.number;
          }
        }
      })
    </script>
</body>
</html>